<template>
    <div>
        <van-nav-bar title="详情页" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" />
        <div class="userInfo">
            <div class="left">
                <div class="avatar" @click="toUserMain">
                    <img :src="user.detailList.avatar" alt="">
                </div>
                <span>{{ user.detailList.nickname }}</span>
            </div>
            <div class="right">
                <van-button type="default" round size="small" @click="knowMore">了解更多</van-button>
            </div>

        </div>
        <div class="swiper">
            <van-swipe lazy-render style="height: 100%;">
                <van-swipe-item v-for="image in user.detailList.imgUrl" :key="image">
                    <img :src="image" class="img" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="remark">
            {{ user.detailList.remark }}
        </div>
        <div class="three">
            <van-button type="success" @click="toThree" class="btn" v-if="user.detailList.id==='4479cbcf-6e2a-4fe9-bf22-0e6c52bf3d66'">vr看房</van-button>
        </div>
        
    </div>
</template>

<script setup lang='ts'>
import { userStore } from '@/store';
import { onMounted } from 'vue';

const user = userStore()
import { useRouter } from 'vue-router';
const router = useRouter()
const id: any = router.currentRoute.value.query.id

onMounted(() => {
    user.getDetail(id)
})
const knowMore = () => {
    router.push({
        path: '/ChatInterface',
        query: {
            id: user.detailList.publisherId
        }
    })
}
const onClickLeft = () => {
    router.back()
}
const toThree=()=>{
    router.push({
        path:'/three'
    })
}

const toUserMain=()=>{
    router.push({
        path: '/userMain',
        query: {
            id: user.detailList.publisherId
        }
    })
}

</script>

<style lang='less' scoped>
.swiper {
    width: 100%;
    height: 200px;

    .img {
        width: 100%;
        height: 100%;
    }
}

.remark {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 1.2rem;
    max-height: fit-content;
}

.userInfo {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0.5rem;
    margin-top: 2.875rem;

    .left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }


    .avatar {
        width: 2rem;
        height: 2rem;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
}
.three{
    text-align: center;
}
.btn{
    margin: 1rem auto;
}
</style>
